<template>
  <el-menu background-color="#222832" class="el-menu-vertical-demo" default-active="2" text-color="#fff"
    @open="handleOpen" @close="handleClose" router>
    <el-sub-menu index="1">
      <template #title>
        <el-icon>
          <location />
        </el-icon>
        <span>Navigator One</span>
      </template>
      <el-menu-item-group title="Group One">
        <el-menu-item index="1-1">item one</el-menu-item>
        <el-menu-item index="1-2">item one</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="Group Two">
        <el-menu-item index="1-3">item three</el-menu-item>
      </el-menu-item-group>
      <el-sub-menu index="1-4">
        <template #title>item four</template>
        <el-menu-item index="1-4-1">item one</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
</template>

<script>
  export default {
    name: 'LayoutNav',
  }
</script>
<script setup>
  // import { ref } from "vue" 
  // import {
  //   Menu as IconMenu,
  //   Setting,
  // } from '@element-plus/icons-vue'
  import { useRouter, useRoute } from 'vue-router'
  const router = useRouter();
  const route = useRoute();
  console.log(router,route);
  console.log(this.$route);
</script>

<style lang="less" scoped>

</style>